/**
 * UI渲染器基类
 * 提供通用的DOM操作和渲染方法
 */

import { GAME_CONFIG } from '../config/game-config.js';

export class UIRenderer {
    /**
     * 创建按钮元素
     * @param {Object} options - 按钮配置
     * @returns {HTMLElement} 按钮元素
     */
    static createButton(options) {
        const {
            text,
            icon = null,
            onClick = null,
            disabled = false,
            className = '',
            dataAttributes = {}
        } = options;

        const button = document.createElement('button');
        button.className = `w-full px-3 py-2 rounded text-sm transition-colors ${className}`;

        if (disabled) {
            button.className += ' bg-gray-200 text-gray-500 cursor-not-allowed';
            button.disabled = true;
        }

        // 设置data属性
        Object.entries(dataAttributes).forEach(([key, value]) => {
            button.setAttribute(`data-${key}`, value);
        });

        // 添加图标和文字
        let buttonHTML = '';
        if (icon) {
            buttonHTML += `<i class="fa ${icon} mr-1"></i>`;
        }
        buttonHTML += text;
        button.innerHTML = buttonHTML;

        // 绑定点击事件
        if (onClick && !disabled) {
            button.addEventListener('click', onClick);
        }

        return button;
    }

    /**
     * 创建资源成本显示
     * @param {Object} cost - 成本对象 {wood: 10, food: 20}
     * @param {string} label - 标签文字
     * @returns {HTMLElement} 成本显示元素
     */
    static createCostDisplay(cost, label = '成本') {
        const container = document.createElement('div');
        container.className = 'mb-3';

        const labelDiv = document.createElement('div');
        labelDiv.className = 'text-sm text-gray-600 mb-2';
        labelDiv.textContent = `${label}:`;
        container.appendChild(labelDiv);

        const costDiv = document.createElement('div');
        costDiv.className = 'flex space-x-3';

        if (cost.wood !== undefined) {
            const woodDiv = document.createElement('div');
            woodDiv.className = 'flex items-center';
            woodDiv.innerHTML = `
                <i class="fa fa-tree text-success mr-1"></i>
                <span>${cost.wood}</span>
            `;
            costDiv.appendChild(woodDiv);
        }

        if (cost.food !== undefined) {
            const foodDiv = document.createElement('div');
            foodDiv.className = 'flex items-center';
            foodDiv.innerHTML = `
                <i class="fa fa-leaf text-success mr-1"></i>
                <span>${cost.food}</span>
            `;
            costDiv.appendChild(foodDiv);
        }

        container.appendChild(costDiv);
        return container;
    }

    /**
     * 创建进度条
     * @param {number} percentage - 进度百分比 (0-100)
     * @param {string} className - 额外的类名
     * @returns {HTMLElement} 进度条元素
     */
    static createProgressBar(percentage, className = '') {
        const container = document.createElement('div');
        container.className = `progress-bar ${className}`;

        const fill = document.createElement('div');
        fill.className = 'progress-fill';
        fill.style.width = `${Math.min(100, Math.max(0, percentage))}%`;

        container.appendChild(fill);
        return container;
    }

    /**
     * 创建图标
     * @param {string} iconClass - 图标类名
     * @param {string} bgColor - 背景颜色
     * @param {string} additionalClass - 额外的类名
     * @returns {HTMLElement} 图标元素
     */
    static createIcon(iconClass, bgColor = null, additionalClass = '') {
        const iconDiv = document.createElement('div');
        iconDiv.className = `${additionalClass}`;

        const icon = document.createElement('i');
        icon.className = `fa ${iconClass}`;

        if (bgColor) {
            icon.style.color = bgColor;
        }

        iconDiv.appendChild(icon);
        return iconDiv;
    }

    /**
     * 清空容器
     * @param {string|HTMLElement} container - 容器ID或元素
     */
    static clearContainer(container) {
        const element = typeof container === 'string' ?
            document.getElementById(container) : container;

        if (element) {
            element.innerHTML = '';
        }
    }

    /**
     * 显示空状态消息
     * @param {HTMLElement} container - 容器元素
     * @param {string} message - 消息文字
     * @param {string} icon - 图标类名
     */
    static showEmptyState(container, message, icon = 'fa-inbox') {
        container.innerHTML = `
            <div class="text-center py-8 text-gray-500">
                <i class="fa ${icon} text-4xl mb-3 block"></i>
                <p>${message}</p>
            </div>
        `;
    }

    /**
     * 创建卡片容器
     * @param {string} className - 额外的类名
     * @returns {HTMLElement} 卡片元素
     */
    static createCard(className = '') {
        const card = document.createElement('div');
        card.className = `bg-white rounded-lg shadow-sm p-4 ${className}`;
        return card;
    }

    /**
     * 添加淡入动画
     * @param {HTMLElement} element - 元素
     */
    static addFadeInAnimation(element) {
        element.style.opacity = '0';
        element.style.transition = `opacity ${GAME_CONFIG.UI.ANIMATION_DURATION}ms ease-in`;

        setTimeout(() => {
            element.style.opacity = '1';
        }, 10);
    }

    /**
     * 格式化数字（添加千位分隔符）
     * @param {number} num - 数字
     * @returns {string} 格式化后的字符串
     */
    static formatNumber(num) {
        return Math.floor(num).toLocaleString('zh-CN');
    }

    /**
     * 格式化资源变化（添加+/-符号和颜色）
     * @param {number} change - 变化值
     * @returns {Object} {text: string, className: string}
     */
    static formatResourceChange(change) {
        const sign = change >= 0 ? '+' : '';
        const className = change >= 0 ? 'text-success' : 'text-danger';
        return {
            text: `${sign}${this.formatNumber(change)}`,
            className: className
        };
    }
}
